<script setup>
import { ref,reactive,computed,watch,watchEffect } from "vue";

const props=defineProps({
	active:Boolean,
})

</script>


<template>
<div class="icon" :class="{active}">
	<div class="dirIcon"></div>
</div>

</template>


<style scoped>

.icon{
	width: var(--dir-size);
	height:  var(--dir-size);
	display:inline-block;
	position: relative;
}
.dirIcon{
	display:inline-block;
	width: 50%;
	height: 50%;
	box-sizing: border-box;
	border-right: 2px solid rgb(255, 255, 255);
	border-bottom: 2px solid rgb(252, 252, 252);
	margin-right: 10px;
    position: absolute;
	transform: rotate(315deg);
	transform-origin: bottom;
    top: 30%;
    left: 30%;
}
.active .dirIcon{
    transform: rotate(45deg) translate(-50%, -50%);
    transform-origin: center;
	top: 50%;
    left: 20%;
}

</style>